import { ref, reactive } from 'vue'
import { defineStore } from 'pinia'

export const useMenuStore = defineStore('menu', () => {
  // 状态
  const collapsed = ref(false)
  const openKeys = ref([])
  const selectedKeys = ref([])
  const menuList = ref([])

  // 菜单配置
  const defaultMenus = [
    {
      key: 'dashboard',
      title: '仪表盘',
      icon: 'House',
      path: '/dashboard',
      children: [
        { key: 'overview', title: '概览', path: '/dashboard' },
        { key: 'analysis', title: '分析页', path: '/dashboard/analysis' },
        { key: 'monitor', title: '监控页', path: '/dashboard/monitor' }
      ]
    },
    {
      key: 'system',
      title: '系统管理',
      icon: 'Setting',
      children: [
        { key: 'users', title: '用户管理', path: '/system/users' },
        { key: 'roles', title: '角色管理', path: '/system/roles' },
        { key: 'permissions', title: '权限管理', path: '/system/permissions' },
        { key: 'settings', title: '系统设置', path: '/system/settings' }
      ]
    },
    {
      key: 'components',
      title: '组件示例',
      icon: 'Operation',
      children: [
        { key: 'basic', title: '基础组件', path: '/component/basic' },
        { key: 'advanced', title: '高级组件', path: '/component/advanced' },
        { key: 'charts', title: '图表组件', path: '/component/charts' },
        { key: 'icons', title: '图标组件', path: '/component/icons' }
      ]
    },
    {
      key: 'examples',
      title: '功能示例',
      icon: 'Promotion',
      children: [
        { key: 'forms', title: '表单示例', path: '/examples/forms' },
        { key: 'tables', title: '表格示例', path: '/examples/tables' },
        { key: 'charts', title: '图表示例', path: '/examples/charts' }
      ]
    }
  ]

  // 方法
  const setCollapsed = (value) => {
    collapsed.value = value
  }

  const toggleCollapsed = () => {
    collapsed.value = !collapsed.value
  }

  const setOpenKeys = (keys) => {
    openKeys.value = keys
  }

  const setSelectedKeys = (keys) => {
    selectedKeys.value = keys
  }

  const setMenuList = (menus) => {
    menuList.value = menus
  }

  const initMenus = (permissions = []) => {
    // 根据权限过滤菜单
    const filterMenus = (menus) => {
      return menus.filter(menu => {
        if (menu.permission && !permissions.includes(menu.permission)) {
          return false
        }
        if (menu.children) {
          menu.children = filterMenus(menu.children)
          return menu.children.length > 0
        }
        return true
      })
    }

    menuList.value = filterMenus([...defaultMenus])
  }

  const findMenuByPath = (path) => {
    const findMenu = (menus, targetPath) => {
      for (const menu of menus) {
        if (menu.path === targetPath) {
          return menu
        }
        if (menu.children) {
          const found = findMenu(menu.children, targetPath)
          if (found) return found
        }
      }
      return null
    }
    return findMenu(menuList.value, path)
  }

  const getMenuBreadcrumb = (path) => {
    const breadcrumb = []
    const findBreadcrumb = (menus, targetPath, parents = []) => {
      for (const menu of menus) {
        const currentParents = [...parents, menu]
        if (menu.path === targetPath) {
          breadcrumb.push(...currentParents)
          return true
        }
        if (menu.children) {
          if (findBreadcrumb(menu.children, targetPath, currentParents)) {
            return true
          }
        }
      }
      return false
    }
    findBreadcrumb(menuList.value, path)
    return breadcrumb
  }

  return {
    // 状态
    collapsed,
    openKeys,
    selectedKeys,
    menuList,
    
    // 方法
    setCollapsed,
    toggleCollapsed,
    setOpenKeys,
    setSelectedKeys,
    setMenuList,
    initMenus,
    findMenuByPath,
    getMenuBreadcrumb
  }
})
